<template>
  <div>
    <el-table :data="datas" 
      stripe :border="true"
      v-loading="loading" 
      element-loading-text="拼命加载中..." 
      style="width: 100%;"
      @sort-change="sortChange" 
      >
       
       <!--序号-->
      <el-table-column prop=""  header-align="center"  label="序号" type="index" width="75"></el-table-column>

      <!--列名-->
      <!--:width="col.width?col.width:160"  -->
      <template v-for="(col,index) in cols">
        <el-table-column v-if="col.slot" :key="index" :prop="col.prop"  sortable=""  :sort-orders="['ascending', 'descending']"   header-align="center" :label="col.label">
          <template slot-scope="scope">
            <div v-html="col.template(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column v-else 
            :key="index" :prop="col.prop" header-align="center" sortable=""  :sort-orders="['ascending', 'descending']" :label="col.label" :formatter="col.formatter" :min-width="col.min_width?col.min_width:50" >
        </el-table-column>
      </template>

      <!--操作按钮-->
      <el-table-column v-if="buttonGroup.length>0" fixed="right" label="操作" header-align="center">
        <template slot-scope="scope">
          <div class="btn-table" v-for="(item,index) in buttonGroup" :key="index">
            <el-button v-if="formatters(item,scope.row)" plain  :type="item.type" :icon="item.icon" @click="hangdleEvent(item.incident,scope.$index,scope.row)">{{item.name}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--分页begin-->
    <el-pagination 
     background
     style="padding-top:10px"
     :current-page="filter.page"
     :page-sizes="[10, 20, 50, 100]" 
     :page-size="filter.per_page" 
     layout="total, sizes, prev, pager, next, jumper"
     :total="totalrows"
     @size-change="pageSizeChange" 
     @current-change="pageCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ["cols", "datas", "filter", "totalrows", "loading", "buttonGroup"],
  data() {
    return {};
  },
  created() {
    console.log(this.cols);
  },
  computed: {
    //按钮
    formatters() {
      return function(item, row) {
        if (item.formatters) {
          return item.formatters(row);
        } else {
          return true;
        }
      };
    }
  },
  methods: {
    pageSizeChange(val) {
      console.log("每页显示：", val);
      this.$emit("pageSizeChange", val);
    },
    pageCurrentChange(val) {
      console.log(val);
      this.$emit("pageCurrentChange", val);
    },
    hangdleEvent(incident, index, row) {
      this.$emit("buttonEvent", incident, index, row);
    },
    sortChange(val){
      console.log(val);
    }
  }
};
</script>
<style>
.btn-table {
  display: inline-block;
  margin-right: 5px;
}
</style>
